<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/css/style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<header th:fragment="header" class="bg-white shadow">
    <nav class="container mx-auto flex items-center justify-between py-4">
        <!-- Logo -->
        <a th:href="@{/buyer}" class="flex items-center">
            <img src="/uploads/logo.png" alt="钢域云贸" class="h-16">
        </a>

        <!-- 导航项 -->
        <ul class="flex space-x-6">
            <!-- 公共导航项 -->
            <li><a th:href="@{/}" class="text-gray-600 hover:text-blue-600">数据大屏</a></li>
            <li><a th:href="@{/buyer}" class="text-gray-600 hover:text-blue-600">商品区</a></li>
            <li sec:authorize="hasAuthority('BUYER')"><a th:href="@{/buyer/list}" class="text-gray-600 hover:text-blue-600">订单管理</a></li>
            <!-- 供应商专属 -->
            <li sec:authorize="hasAuthority('SUPPLIER')"><a th:href="@{/supplier/product}" class="text-gray-600 hover:text-blue-600">商品管理</a></li>
            <li sec:authorize="hasAuthority('SUPPLIER')"><a th:href="@{/supplier/order/list}" class="text-gray-600 hover:text-blue-600">订单管理</a></li>
            <!-- 管理员专属 -->
            <li sec:authorize="hasAuthority('ADMIN')"><a th:href="@{/manager/user}" class="text-gray-600 hover:text-blue-600">用户管理</a></li>
            <li sec:authorize="hasAuthority('ADMIN')"><a th:href="@{/manager/supplier/rating}" class="text-gray-600 hover:text-blue-600">供应商评级</a></li>
            <li sec:authorize="hasAuthority('ADMIN')"><a th:href="@{/manager/product}" class="text-gray-600 hover:text-blue-600">商品审核</a></li>
        </ul>

        <!-- 用户操作区 -->
        <div class="flex items-center space-x-6">

            <!-- 搜索框 -->
            <form th:action="@{/buyer}" method="get" class="relative w-64">
                <input type="text" name="search" placeholder="搜索商品…"
                       class="pl-4 pr-10 py-2 rounded-full text-sm text-gray-800 border border-gray-300 w-full
                      focus:outline-none focus:ring-2 focus:ring-blue-300 transition" />
                <button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-blue-600">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M21 21l-5-5m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                </button>
            </form>

            <!-- 购物车 -->
            <div sec:authorize="hasAuthority('BUYER')">
                <a th:href="@{/buyer/cart/view}" class="text-gray-600 hover:text-blue-600">
                    <i class="fas fa-shopping-cart text-lg"></i>
                </a>
            </div>

            <!-- 消息提醒 -->
            <div sec:authorize="hasAuthority('SUPPLIER')" class="relative">
                <a th:href="@{/supplier/message}" class="text-gray-600 hover:text-blue-600 relative">
                    <i class="fas fa-envelope text-lg"></i>
                    <span class="absolute -top-1 -right-1 bg-red-500 text-white rounded-full text-xs px-1.5"
                          th:if="${session.unreadMessages > 0}" th:text="${session.unreadMessages}">!</span>
                </a>
            </div>

            <!-- 消息提醒 -->
            <div sec:authorize="hasAuthority('BUYER')" class="relative">
                <a th:href="@{/buyer/message}" class="text-gray-600 hover:text-blue-600 relative">
                    <i class="fas fa-envelope text-lg"></i>
                    <span class="absolute -top-1 -right-1 bg-red-500 text-white rounded-full text-xs px-1.5"
                          th:if="${session.unreadMessages > 0}" th:text="${session.unreadMessages}">!</span>
                </a>
            </div>
        </div>

        <!-- 用户中心 -->
        <div class="relative ml-4">
            <div sec:authorize="isAnonymous()">
                <a th:href="@{/login}" class="text-gray-600 hover:text-blue-600">登录</a>
            </div>
            <div sec:authorize="isAuthenticated()">
                <div id="userMenuTrigger" class="text-gray-600 cursor-pointer flex items-center" onclick="toggleUserMenu()">
                    <!-- Avatar -->
                    <div sec:authorize="hasAnyAuthority('BUYER', 'SUPPLIER')">
                        <img th:src="${session.user.avatar ?: '/uploads/placeholder.png'}" alt="Avatar"
                             class="w-8 h-8 rounded-full mr-2 object-cover">
                    </div>
                    <!-- 用户名显示 -->
                    <span th:if="${#authorization.expression('hasAuthority(''BUYER'')')}" th:text="${session.user.username}"></span>
                    <span th:if="${#authorization.expression('hasAuthority(''SUPPLIER'')')}" th:text="${session.user.company ?: session.user.username}"></span>
                    <span th:if="${#authorization.expression('hasAuthority(''ADMIN'')')}">管理员</span>
                    <!-- 下拉箭头 -->
                    <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </div>

                <!-- 菜单 -->
                <div id="userMenu"
                     class="absolute hidden bg-white shadow rounded mt-2 right-0 z-20 transition-all duration-300 ease-in-out transform scale-95 opacity-0 min-w-[140px]">
                    <a sec:authorize="hasAuthority('BUYER')" th:href="@{/buyer/profile}"
                       class="block px-4 py-2 text-sm text-gray-600 hover:bg-gray-100">个人中心</a>
                    <a sec:authorize="hasAuthority('SUPPLIER')" th:href="@{/supplier/profile}"
                       class="block px-4 py-2 text-sm text-gray-600 hover:bg-gray-100">店铺中心</a>
                    <a th:href="@{/logout}" class="block px-4 py-2 text-sm text-gray-600 hover:bg-gray-100">登出</a>
                </div>
            </div>
        </div>
    </nav>
</header>

<script>
    // 切换用户菜单的显示和隐藏
    function toggleUserMenu() {
        const menu = document.getElementById('userMenu');
        const isHidden = menu.classList.contains('hidden');
        if (isHidden) {
            menu.classList.remove('hidden', 'scale-95', 'opacity-0');
            menu.classList.add('block', 'scale-100', 'opacity-100');
        } else {
            menu.classList.remove('block', 'scale-100', 'opacity-100');
            menu.classList.add('hidden', 'scale-95', 'opacity-0');
        }
    }

    // 点击页面其他区域时关闭菜单
    document.addEventListener('click', function(event) {
        const userMenu = document.getElementById('userMenu');
        const userMenuTrigger = document.getElementById('userMenuTrigger');
        if (!userMenu || !userMenuTrigger) return;

        const isClickInside = userMenuTrigger.contains(event.target) || userMenu.contains(event.target);
        if (!isClickInside && !userMenu.classList.contains('hidden')) {
            userMenu.classList.remove('block', 'scale-100', 'opacity-100');
            userMenu.classList.add('hidden', 'scale-95', 'opacity-0');
        }
    });
</script>
</body>
</html>